<template>
  <div style="margin: 10px 0">
    <el-card>
      <div slot="header" style="display: flex; justify-content: space-between">
        <div style="display: flex; align-items: center">
          <span v-if="!edit" style="font-size: 14px">{{ info.name }}</span>
          <el-input v-else size="mini" v-model="info.name"/>
          <el-button style="margin-left: 5px" type="text" :icon="edit ? 'el-icon-check' : 'el-icon-edit'" @click="editTitle"/>
        </div>
        <div>
          <el-button type="primary" size="mini" icon="el-icon-plus">添加条件</el-button>
          <el-button type="danger" size="mini" icon="el-icon-close" @click="removeRule">移除规则</el-button>
        </div>
      </div>
      <div v-if="info.conditions.length > 0">
        <el-timeline style="margin-left: -25px">
          <el-timeline-item>
            <div class="title">当</div>
            <div class="area">
              <el-tag effect="dark" class="tag1">培训课程状态</el-tag>
              <el-tag effect="dark" class="tag2">等于</el-tag>
              <el-tag effect="dark" class="tag1">已完成</el-tag>
            </div>
            <div class="title">并且</div>
            <div class="area">
              <el-tag effect="dark" class="tag1">培训课程状态</el-tag>
              <el-tag effect="dark" class="tag2">等于</el-tag>
              <el-tag effect="dark" class="tag1">已完成</el-tag>
            </div>
          </el-timeline-item>
          <el-timeline-item v-if="info.events">
            <div class="title">然后</div>
            <div class="area">
              <el-tag effect="dark" class="tag3">{{ info.events.name }}</el-tag>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div v-else>
        <el-empty :image-size="70" description="暂无条件，请添加条件"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    info: {}
  },
  data() {
    return {
      edit: false
    }
  },
  created() {
  },
  methods: {
    editTitle() {
      console.log("aa")
      this.edit = !this.edit
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 14px;
  color: rgba(51, 48, 48, 0.84);
}

.area {
  width: 100%;
  height: 50px;
  background-color: #F4F5F5;
  margin: 10px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.tag1 {
  margin: 5px;
  border: none;
  background-color: blue;
}

.tag2 {
  margin: 5px;
  border: none;
  background-color: green;
}

.tag3 {
  margin: 5px;
  border: none;
  background-color: red;
}
</style>
